<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>根组件</h1>
        <div>msg:{{msg}}</div>
        <input type="button" value="修改msg" @click="changeMsg">
        <hr/>
        <Person></Person>
    </div>
</body>

</html>
<script src="./js/vue.global.js"></script>
<script>

    const {createApp,computed} = Vue;

    let Book = {
        template:`
            <h1>我是书</h1>
            <div>msg:{{bookmsg.value}}</div>
            <div>
                <p>书名:{{bookLocal.name}}</p>    
                <p>作者:{{bookLocal.author}}</p>    
            </div>
        `,
        // inject:["msg"] //把父级组件提供（provide）的数据注入到当前组件里
        inject:{
            "bookmsg":{
                from : 'msg',
                default:"没有提供msg"
            },
            "bookLocal":{
                from :"bookObj",
                default: () => ({ name: '西游记' ,author:"吴承恩"})
            }
        }
    }

    let Person = {
        components:{Book},
        template:`
            <h1>我是人</h1>
            <hr/>
            <Book/>
        `,
    }


    let app = createApp({
        components:{
            Person
        },
        data(){
            return {
                msg:"hello"
            }
        },
        provide(){
            return {
                msg:computed(()=>{
                    return this.msg
                }),
                // msg:this.msg,
                bookObj:{
                    name:"三国演义",
                    author:"罗贯中"
                }
            }
        },
        methods:{
            changeMsg(){
                this.msg += "1";
            }
        }
    });

    app.mount("#app");


</script>